<template>
  <div class="app-container">
    <!-- 提示开始 -->
    <el-alert
      type="warning"
      description="前端页面中轮播图只显示排序值从低到高的前五个。相同的排序值不保证其排序顺序"
      show-icon
    >
    </el-alert>
    <!-- 提示结束 -->
    <!-- 添加按钮开始 -->
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button size="mini" class="btn-add" @click="handleAddBtn()"
        >添加轮播图</el-button
      >
    </el-card>
    <!-- 添加按钮结束 -->
    <!-- 表格开始 -->
    <div class="table-container">
    <el-table
      v-loading="loading"
      :data="swiperList"
      element-loading-text="数据加载中"
      stripe
      style="width: 100%"
      border
    >
      <el-table-column prop="date" label="序号" width="120" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="轮播图名字" align="center"> </el-table-column>
      <el-table-column prop="imageUrl" label="轮播图" width="120" align="center">
        <template slot-scope="scope"
          ><el-image style="height: 80px" :src="scope.row.imageUrl"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="linkUrl" label="点击连接"> </el-table-column>
      <el-table-column prop="sort" label="排序值"> </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间"> </el-table-column>
      <el-table-column prop="gmtModified" label="修改时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-edit"
            @click="handleEditBtn(scope.row)"
            style="margin-left: 10px"
            >修改</el-button
          >

          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.id)"
            style="margin-left: 10px"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    </div>
    <!-- 表格结束 -->

    <!-- 分页开始 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      layout="total,prev, pager, next,jumper"
      @current-change="getAllSwiper"
      style="padding: 30px 0; text-align: center"
    >
    </el-pagination>
    <!-- 分页结束 -->

    <!-- 弹出框开始 -->
    <el-dialog
      title="轮播图信息"
      :visible.sync="dialogFormVisible"
      @close="handleClose"
    >
      <el-card class="dialog-container" shadow="never">
        <el-form>
          <el-form-item label="轮播图名字" :label-width="formLabelWidth">
            <el-input v-model="params.name"></el-input>
          </el-form-item>
          <el-form-item label="轮播图：" :label-width="formLabelWidth">
            <single-upload v-model="params.imageUrl"></single-upload>
          </el-form-item>
          <el-form-item label="点击连接" :label-width="formLabelWidth">
            <el-input v-model="params.linkUrl"></el-input>
          </el-form-item>
          <el-form-item label="排序值" :label-width="formLabelWidth">
            <el-input
              v-model="params.sort"
              placeholder="数值越小越靠前"
            ></el-input>
          </el-form-item>
        </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
      
    </el-dialog>
    <!-- 弹出框结束 -->
  </div>
</template>

<script>
import swiper from "@/api/cmsSwiper";
import singleUpload from "@/components/Upload/singleUpload";
export default {
  components: {
    singleUpload,
  },
  data() {
    return {
      loading: true,
      page: 1,
      limit: 10,
      total: 0,
      swiperList: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      params: {
        id: "",
        imageUrl: "",
        linkUrl: "",
        sort: "",
      },
    };
  },
  created() {
    this.getAllSwiper();
  },
  methods: {
    //获得所有轮播图
    getAllSwiper(page = 1) {
      this.page = page;
      swiper.getSwiper(this.page, this.limit).then((res) => {
        console.log(res);
        this.swiperList = res.data.result;
        this.total = res.data.total;
        this.loading = false;
        console.log(this.swiperList);
      });
    },

    //添加轮播图事件
    handleAddBtn() {
      this.dialogFormVisible = true;
    },

    //修改轮播图
    handleEditBtn(row) {
      this.params.id = row.id;
      this.params.imageUrl = row.imageUrl;
      this.params.linkUrl = row.linkUrl;
      this.params.sort = row.sort;

      console.log(this.params);

      this.dialogFormVisible = true;
    },
    //删除轮播图
    removeDataById(id) {
      this.$confirm("确定删轮播图?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          swiper.deleteSwiperById(id).then((res) => {
            this.$message.success("删除成功");
            this.getAllSwiper();
          });
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },

    //弹出框关闭回调
    handleClose() {
      //console.log("触发了关闭回调")
      this.params = {};
      this.dialogFormVisible = false;
    },

    //弹出框确定按钮事件
    handleConfirm() {
      if (this.params.id == null || this.params.id == "") {
        //console.log("执行了添加方法")
        swiper.addSwiper(this.params).then((res) => {
          this.$message.success("添加成功");
          this.getAllSwiper();
          this.dialogFormVisible = false;
        });
      } else {
        swiper.updataSwiper(this.params).then((res) => {
          // console.log("执行了更新方法")
          this.$message.success("更新成功");
          this.getAllSwiper();
          this.dialogFormVisible = false;
        });
      }
    },
  },
};
</script>